<template>
    <div class="table-search-container" v-if="props.search.length > 0">
        <el-form ref="tableSearchRef" :model="state.form" size="default" label-width="100px" class="table-form">
            <el-row>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-for="(val, key) in search" :key="key"
                    v-show="key === 0 || state.isToggle">
                    <template v-if="val.type !== ''">
                        <el-form-item :label="val.label" :prop="val.prop"
                            :rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: val.type === 'input' ? 'blur' : 'change' }]">
                            <el-input v-model="state.form[val.prop]" :placeholder="val.placeholder" clearable
                                v-if="val.type === 'input'" style="width: 100%" />
                            <el-input-number v-model="state.form[val.prop]" :placeholder="val.placeholder" clearable
                                v-if="val.type === 'number'" style="width: 100%" />
                            <el-date-picker v-model="state.form[val.prop]" type="date" :placeholder="val.placeholder"
                                v-else-if="val.type === 'date'" :format="'YYYY-MM-DD'" :value-format="'YYYY-MM-DD'"
                                style="width: 100%" />
                            <el-time-picker v-model="state.form[val.prop]" type="time" :placeholder="val.placeholder"
                                v-else-if="val.type === 'time'" :format="'HH:mm:ss'" :value-format="'HH:mm:ss'"
                                style="width: 100%" />
                            <el-date-picker v-model="state.form[val.prop]" type="datetime" :placeholder="val.placeholder"
                                v-else-if="val.type === 'stamp'" :format="'YYYY-MM-DD'" :value-format="'YYYY-MM-DD'"
                                style="width: 100%" />
                            <el-select v-model="state.form[val.prop]" :placeholder="val.placeholder"
                                v-else-if="val.type === 'select'" style="width: 100%">
                                <el-option v-for="item in val.options" :key="item.value" :label="item.label"
                                    :value="item.value"> </el-option>
                            </el-select>
                            <el-select v-model="state.form[val.prop]" :placeholder="val.placeholder"
                                v-else-if="val.type === 'multi'" multiple clearable style="width: 100%">
                                <el-option v-for="item in val.options" :key="item.value" :label="item.label"
                                    :value="item.value"> </el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                    <el-form-item class="table-form-btn" :label-width="search.length <= 1 ? '10px' : '100px'">
                        <template #label v-if="search.length > 1">
                            <div class="table-form-btn-toggle ml10" @click="state.isToggle = !state.isToggle">
                                <span>{{ state.isToggle ? $t('message.btnName.folding') : $t('message.btnName.deployment') }}</span>
                                <SvgIcon :name="state.isToggle ? 'ele-ArrowUp' : 'ele-ArrowDown'" />
                            </div>
                        </template>
                        <div style="display: flex;">
                            <el-button size="default" type="primary" text @click="onSearch(tableSearchRef)">
                                <el-icon style="font-size: 20px !important;">
                                    <ele-Search />
                                </el-icon>
                                {{ $t('message.btnName.search') }}
                            </el-button>
                            <el-button size="default" type="success" style="margin-left: 50px !important;" @click="onDownload(tableSearchRef)">
                                <el-icon>
                                    <ele-FolderAdd />
                                </el-icon>
                                {{ $t('message.btnName.export') }}
                            </el-button>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script setup lang="ts" name="makeTableDemoSearch">
import { reactive, ref, onMounted } from 'vue';
import type { FormInstance } from 'element-plus';

// 定义父组件传过来的值
const props = defineProps({
    // 搜索表单
    search: {
        type: Array,
        default: () => [],
    } as any,
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['search', 'addRow', 'count', 'download']);

// 定义变量内容
const tableSearchRef = ref<FormInstance>();
const state = reactive({
    form: {} as any,
    isToggle: false,
});

const addRow = () => {
    emit('addRow')
}

// 查询
const onSearch = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid: boolean) => {
        if (valid) {
            emit('search', state.form);
        } else {
            return false;
        }
    });
};
// 统计
const onCount = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid: boolean) => {
        if (valid) {
            emit('count', state.form);
        } else {
            return false;
        }
    });
};
// 导出
const onDownload = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid: boolean) => {
        if (valid) {
            emit('download', state.form);
        } else {
            return false;
        }
    });
};
// 重置
const onReset = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
    emit('search', state.form);
};


// 初始化 form 字段，取自父组件 search.prop
const initFormField = () => {
    if (props.search.length <= 0) return false;
    props.search.forEach((v: any) => (state.form[v.prop] = v.defaultValue || undefined));
};
// 页面加载时
onMounted(() => {
    initFormField();
});
</script>

<style scoped lang="scss">
.table-search-container {
    display: flex;

    .table-form {
        flex: 1;

        .table-form-btn-toggle {
            white-space: nowrap;
            user-select: none;
            display: flex;
            align-items: center;
            color: var(--el-color-primary);
        }
    }
}
</style>
